<template>
	<div class="dialogue-container">
		<!-- 背景图 -->
		<image class="background" :src="currentScene.background" mode="aspectFill"></image>
		
		<!-- 角色立绘 -->
		<div class="characters">
			<image class="character left" 
				   v-if="currentDialogue.left_character"
				   :src="getCharacterImage(currentDialogue.left_character)"
				   :class="{ active: currentDialogue.speaker === 'left' }"
				   mode="aspectFit"></image>
			<image class="character right" 
				   v-if="currentDialogue.right_character"
				   :src="getCharacterImage(currentDialogue.right_character)"
				   :class="{ active: currentDialogue.speaker === 'right' }"
				   mode="aspectFit"></image>
		</div>

		<!-- 对话框 -->
		<div class="dialogue-box">
			<div class="speaker-name" v-if="currentDialogue.speaker_name">
				<text>{{ currentDialogue.speaker_name }}</text>
			</div>
			<div class="dialogue-text">
				<text class="text-content">{{ displayText }}</text>
				<div class="continue-hint" v-if="isTextComplete && !showChoices">
					<text>点击继续</text>
				</div>
			</div>
		</div>

		<!-- 选择分支 -->
		<div class="choices-container" v-if="showChoices">
			<div class="choice-item" 
				  v-for="(choice, index) in currentChoices" 
				  :key="index"
				  @click="selectChoice(choice)">
				<text>{{ choice.text }}</text>
				<div class="choice-effect" v-if="choice.effect">
					<text>{{ choice.effect }}</text>
				</div>
			</div>
		</div>

		<!-- 控制按钮 -->
		<div class="controls">
			<div class="control-btn" @click="toggleAuto">
				<text>{{ isAuto ? '停止' : '自动' }}</text>
			</div>
			<div class="control-btn" @click="toggleSkip">
				<text>{{ isSkipping ? '停止' : '跳过' }}</text>
			</div>
			<div class="control-btn" @click="openHistory">
				<text>历史</text>
			</div>
			<div class="control-btn" @click="exitDialogue">
				<text>退出</text>
			</div>
		</div>

		<!-- 历史记录弹窗 -->
		<div class="history-modal" v-if="showHistory" @click="closeHistory">
			<div class="history-content" @click.stop>
				<div class="history-header">
					<text>对话历史</text>
					<div class="close-btn" @click="closeHistory">
						<text>×</text>
					</div>
				</div>
				<div class="history-list">
					<div class="history-item" v-for="(item, index) in dialogueHistory" :key="index">
						<text class="history-speaker">{{ item.speaker_name }}</text>
						<text class="history-text">{{ item.text }}</text>
					</div>
				</div>
			</div>
		</div>

		<!-- 加载状态 -->
		<div class="loading" v-if="loading">
			<text>加载中...</text>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			questId: '',
			step: 1,
			currentDialogue: {
				id: '',
				text: '',
				speaker_name: '',
				speaker: '',
				left_character: '',
				right_character: ''
			},
			currentScene: {
				background: '/static/scenes/default.jpg'
			},
			currentChoices: [],
			dialogueHistory: [],
			displayText: '',
			isTextComplete: false,
			showChoices: false,
			showHistory: false,
			isAuto: false,
			isSkipping: false,
			loading: false,
			textTimer: null,
			autoTimer: null,
			textSpeed: 50 // 打字机效果速度(ms)
		}
	},
	onLoad(options) {
		this.questId = options.quest_id || ''
		this.step = parseInt(options.step) || 1
		if (this.questId) {
			this.loadDialogue()
		}
	},
	onUnload() {
		this.clearTimers()
	},
	methods: {
		// 加载对话数据
		async loadDialogue() {
			this.loading = true
			try {
				// 模拟对话数据
				const dialogueData = {
					id: 'dialogue_001',
					text: '郭靖，你终于来了。裘千仞已经带着武穆遗书逃往铁掌峰，我们必须尽快追上他。',
					speaker_name: '黄蓉',
					speaker: 'left',
					left_character: 'huangrong',
					right_character: 'guojing',
					choices: [
						{
							id: 'choice_1',
							text: '好，我们立刻出发！',
							next_step: 2,
							effect: '正义+1'
						},
						{
							id: 'choice_2',
							text: '让我先准备一下装备',
							next_step: 3,
							effect: '谨慎+1'
						},
						{
							id: 'choice_3',
							text: '铁掌峰太危险了...',
							next_step: 4,
							effect: '胆怯+1'
						}
					]
				}

				this.currentDialogue = dialogueData
				this.currentScene.background = '/static/scenes/peach_island.jpg'
				
				// 添加到历史记录
				this.dialogueHistory.push({
					speaker_name: dialogueData.speaker_name,
					text: dialogueData.text
				})

				// 开始打字机效果
				this.startTypewriter()
			} catch (error) {
				console.error('加载对话失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 打字机效果
		startTypewriter() {
			this.displayText = ''
			this.isTextComplete = false
			this.showChoices = false
			
			const fullText = this.currentDialogue.text
			let currentIndex = 0

			this.textTimer = setInterval(() => {
				if (currentIndex < fullText.length) {
					this.displayText += fullText[currentIndex]
					currentIndex++
				} else {
					clearInterval(this.textTimer)
					this.isTextComplete = true
					
					// 显示选择分支
					if (this.currentDialogue.choices && this.currentDialogue.choices.length > 0) {
						setTimeout(() => {
							this.currentChoices = this.currentDialogue.choices
							this.showChoices = true
						}, 500)
					}
					
					// 自动播放
					if (this.isAuto && !this.showChoices) {
						this.autoTimer = setTimeout(() => {
							this.nextDialogue()
						}, 2000)
					}
				}
			}, this.isSkipping ? 10 : this.textSpeed)
		},

		// 选择分支
		selectChoice(choice) {
			this.step = choice.next_step
			this.showChoices = false
			
			// 显示选择效果
			if (choice.effect) {
				uni.showToast({
					title: choice.effect,
					icon: 'none',
					duration: 1500
				})
			}
			
			// 加载下一段对话
			setTimeout(() => {
				this.loadDialogue()
			}, 1000)
		},

		// 下一段对话
		nextDialogue() {
			if (!this.isTextComplete) {
				// 快速完成打字机效果
				clearInterval(this.textTimer)
				this.displayText = this.currentDialogue.text
				this.isTextComplete = true
				
				if (this.currentDialogue.choices && this.currentDialogue.choices.length > 0) {
					this.currentChoices = this.currentDialogue.choices
					this.showChoices = true
				}
			} else if (!this.showChoices) {
				// 继续下一段对话
				this.step++
				this.loadDialogue()
			}
		},

		// 切换自动播放
		toggleAuto() {
			this.isAuto = !this.isAuto
			if (!this.isAuto) {
				clearTimeout(this.autoTimer)
			}
			uni.showToast({
				title: this.isAuto ? '自动播放开启' : '自动播放关闭',
				icon: 'none'
			})
		},

		// 切换跳过模式
		toggleSkip() {
			this.isSkipping = !this.isSkipping
			uni.showToast({
				title: this.isSkipping ? '跳过模式开启' : '跳过模式关闭',
				icon: 'none'
			})
		},

		// 打开历史记录
		openHistory() {
			this.showHistory = true
		},

		// 关闭历史记录
		closeHistory() {
			this.showHistory = false
		},

		// 退出对话
		exitDialogue() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出剧情对话吗？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			})
		},

		// 获取角色图片
		getCharacterImage(character) {
			return `/static/characters/${character}.png`
		},

		// 清理定时器
		clearTimers() {
			if (this.textTimer) {
				clearInterval(this.textTimer)
			}
			if (this.autoTimer) {
				clearTimeout(this.autoTimer)
			}
		},

		// 点击对话框继续
		onDialogueClick() {
			if (!this.showChoices) {
				this.nextDialogue()
			}
		}
	}
}
</script>

<style scoped>
.dialogue-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
}

.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.characters {
	position: absolute;
	bottom: 200rpx;
	left: 0;
	right: 0;
	height: 600rpx;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 50rpx;
}

.character {
	height: 100%;
	max-width: 300rpx;
	opacity: 0.7;
	transition: all 0.3s ease;
	filter: brightness(0.8);
}

.character.active {
	opacity: 1;
	filter: brightness(1);
	transform: scale(1.05);
}

.character.left {
	transform-origin: bottom left;
}

.character.right {
	transform-origin: bottom right;
}

.dialogue-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 300rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
	z-index: 3;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.speaker-name {
	margin-bottom: 20rpx;
}

.speaker-name text {
	font-size: 28rpx;
	color: #ffd700;
	font-weight: bold;
	text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.8);
}

.dialogue-text {
	position: relative;
	flex: 1;
}

.text-content {
	font-size: 32rpx;
	color: white;
	line-height: 1.6;
	text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.8);
	display: block;
}

.continue-hint {
	position: absolute;
	bottom: 0;
	right: 0;
	animation: blink 1s infinite;
}

.continue-hint text {
	font-size: 24rpx;
	color: #ccc;
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0.3; }
}

.choices-container {
	position: absolute;
	bottom: 320rpx;
	left: 50rpx;
	right: 50rpx;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.choice-item {
	padding: 30rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 15rpx;
	border-left: 8rpx solid #1890ff;
	transition: all 0.3s;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.3);
}

.choice-item:active {
	transform: scale(0.98);
	background: rgba(255,255,255,0.8);
}

.choice-item text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	display: block;
	margin-bottom: 10rpx;
}

.choice-effect {
	margin-top: 10rpx;
}

.choice-effect text {
	font-size: 22rpx;
	color: #666;
	background-color: #f0f0f0;
	padding: 4rpx 12rpx;
	border-radius: 10rpx;
	display: inline-block;
}

.controls {
	position: absolute;
	top: 50rpx;
	right: 50rpx;
	z-index: 5;
	display: flex;
	gap: 20rpx;
}

.control-btn {
	padding: 15rpx 25rpx;
	background: rgba(0,0,0,0.6);
	border-radius: 25rpx;
	border: 2rpx solid rgba(255,255,255,0.3);
	transition: all 0.3s;
}

.control-btn:active {
	background: rgba(0,0,0,0.8);
	transform: scale(0.95);
}

.control-btn text {
	font-size: 24rpx;
	color: white;
	font-weight: bold;
}

.history-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.8);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50rpx;
}

.history-content {
	width: 100%;
	max-width: 600rpx;
	height: 80vh;
	background: white;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.history-header text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-btn text {
	font-size: 40rpx;
	color: #666;
	font-weight: normal;
}

.history-list {
	flex: 1;
	padding: 20rpx;
	overflow-y: auto;
}

.history-item {
	padding: 20rpx;
	margin-bottom: 15rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
}

.history-speaker {
	font-size: 24rpx;
	color: #1890ff;
	font-weight: bold;
	margin-bottom: 8rpx;
	display: block;
}

.history-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}

.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	padding: 40rpx;
	background: rgba(0,0,0,0.8);
	border-radius: 15rpx;
	color: white;
	font-size: 28rpx;
}
</style>